import React, { useEffect, useState } from 'react';
import {interviewListQuery, ISkillLabel,interRecord} from '@/utils/interface'
import { getinter, getinterView } from '@/services';
import {Table,Input,Button } from 'antd'
import { SearchOutlined ,PlusOutlined} from '@ant-design/icons';
import './interviewManage.less'
import {NavLink} from 'umi'
import styles from './interviewManage.less'
import classNames from 'classnames';
const soundrecordList=['无','有']
let status=[
    {
        title:'全部',
        type:''
    },
    {
        title:'通过',
        type:1
    },
    {
        title:'未通过',
        type:2
    },
    {
        title:'不确定',
        type:0
    },
]
const columns=[
    {
        title: '岗位名称',
        render:(row:interRecord)=>
        <NavLink to={`/teachers/interviewRecord?interviewId=${row.interviewId}&shield=${row.shield}&see=true`}>
            <span>{row.stationName}</span>
            </NavLink>
    },
    {
        title: '公司名称',
        dataIndex: 'companyName',
    },
    {
        title: '面试时间',
        dataIndex: 'interviewTime',
    },
    {
        title: '面试官',
        dataIndex: 'intervierManagement',
    },
    {
        title: '专业',
        dataIndex: 'majorName',
    },
    {
        title: '提交人',
        dataIndex: 'commitName',
    },
    {
        title: '面试结果',
        render : (row:ISkillLabel)=> <span>{status[Number(row.status)].type==0 ? '不确定' :status[Number(row.status)].title}</span>
    },
    {
        title: '录音文件',
        render : (row:ISkillLabel)=> <span>{soundrecordList[Number(row.issoundrecord)]}</span>
    },
]
const interviewManage:React.FC=()=>{
    let [curStatus, setCurStatus] = useState(0);
    let [ curSkill , setCurSkill ] = useState('')
    let [dataSource, setDataSource] = useState<ISkillLabel[]>([]);
    let [inter,getInter]=useState<ISkillLabel[]>([])
    let [ searchTitle , SetSearchTitle] = useState('');
    let [title, setTitle] = useState('');
    useEffect(()=>{
        getinterView().then(res=>{
            if(res.code==200){
                getInter(res.data)
            }
        })
    },[])
    useEffect(() => {
        let queryParams : interviewListQuery = {} as  interviewListQuery;
        if(curStatus){
            queryParams = { ...queryParams ,searchTitle, majorId : curSkill , status : curStatus }
        }
        else
        {
            queryParams = { ...queryParams , searchTitle,majorId : curSkill , status : '' as unknown as number }
        }
        getinter(queryParams).then(res => {
            if (res.code == 200) {
                setDataSource(res.rows);
            }
        })
    }, [curSkill,curStatus,searchTitle])
    return <div className='interviewList'>
      <section>
      <section className={styles.top}>
        <span className={styles.major}>专业</span>
            <ul className='profession'>
                {
                    [{ id:'', name: '全部' }, ...inter].map(item=>{
                        return <span className={item.id === curSkill ? classNames(styles.span, styles.active) : styles.span} 
                        onClick={e => setCurSkill(item.id)} key={item.id}>{item.name}</span>
                    })
                }
            </ul>
        </section>
        <section className={styles.top}>
            <span className={styles.major}>状态：</span>
                <ul className='state'>
                    {
                    status.map((item, index) => {
                        return <span className={index === curStatus ? classNames(styles.span, styles.active) : styles.span} onClick={e => setCurStatus(index)} key={index}>{item.title}</span>
                    })
                }</ul>
        </section>
      </section>
      <div className='Form'>
            <Input placeholder="搜索岗位/公司名称" className={styles.search}  suffix={<SearchOutlined onClick={()=>{ SetSearchTitle(title)}}/>} value={title} onChange={e=>setTitle(e.target.value)} onKeyDown={e=>{
                if(e.keyCode === 13)
                {
                    SetSearchTitle(title)
                }
            }}/>
            <NavLink to="/students/interviewRecord">
             <Button type="primary" className={styles.button}><PlusOutlined />添加面试记录</Button>
             </NavLink>
        </div>
        <Table rowKey="interviewId" dataSource={dataSource} columns={columns}></Table>
    </div>
}
export default interviewManage